<template>
  <div class="chicangcontainer">
    <div class="toubu">
      <div class="tl"></div>
      <a class="tr" @click="getsearch"></a>
    </div>
    <div class="dabokl">
      <div class="sert">
        <span
          v-for="(item, index) in chicangList"
          :key="index"
          @click="chicangidx = index"
          :class="chicangidx == index ? 'sdpl' : ''"
          >{{ item.name }}</span
        >
        <a :style="chicangidx == 0 ? 'left: 0.8rem;' : 'left: 4.54rem;'"></a>
      </div>
      <div class="bnm"></div>
    </div>
    <div class="chicanglistmain">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="$t('hj43')"
        v-show="chicangidx === 0"
        @load="onLoad"
        :immediate-check="immediate"
      >
        <div
          class="cichang"
          @click="goDetail(item, index)"
          v-for="(item, index) in tabsPositionNumArr"
          :key="item.buyOrderId"
        >
          <div class="dingbu">
            <div class="dl">
              <h6>{{ item.stockName ? item.stockName : item.indexName }}</h6>
              <p>
                <span v-show="item.stockGid.indexOf('sz') >= 0">深</span>
                <span class="sh" v-show="item.stockGid.indexOf('sh') >= 0"
                  >沪</span
                >
                <span class="bj" v-show="item.stockGid.indexOf('bj') >= 0"
                  >北</span
                >
                <a class="">{{ item.stockGid }}</a>
              </p>
            </div>
            <div
              class="dr"
              v-if="chicangidx == 0"
              @click.stop="getpingcang(item.positionSn)"
            >
              平仓
            </div>
          </div>
          <div class="fudo" v-if="chicangidx == 0">
            <h6>
              最新 <span class="red">{{ item.now_price }}</span>
            </h6>
            <p>{{ item.buyOrderTime | gettime }}</p>
          </div>
          <div class="fudo" v-else>
            <h6>卖出时间</h6>
            <p>2022-12-03 13:21</p>
          </div>
          <div class="fudong redbg">
            <div class="kuij">
              <p>
                <span>浮动盈亏：</span
                ><a class="red">{{ item.profitAndLose }}</a>
              </p>
              <p>
                <span>总盈亏：</span
                ><a class="red">{{ item.allProfitAndLose }}</a>
              </p>
            </div>
          </div>
          <div class="plkm">
            <p>
              <span>买入价格</span
              ><a class="red">{{ item.buyOrderPrice }}/股</a>
            </p>
            <p>
              <span>数量</span><a class="red">{{ item.orderNum }}股</a>
            </p>
            <p>
              <span>买入手续费</span><a class="red">{{ item.orderFee }}</a>
            </p>
            <p>
              <span>股值</span><a class="red">{{ item.orderTotalPrice }}</a>
            </p>
            <p>
              <span>杠杆倍数</span><a class="red">{{ item.orderLever }}x</a>
            </p>
            <p>
              <span>使用本金</span
              ><a class="red">{{ item.orderTotalPrice / item.orderLever }}</a>
            </p>
            <p v-if="chicangidx == 1">
              <span>买入价格</span><a class="red">5.49/股</a>
            </p>
            <p v-if="chicangidx == 1">
              <span>留仓费</span><a class="red">49959.00</a>
            </p>
          </div>
        </div>
      </van-list>
      <!-- 平仓 -->
      <van-list
        v-model="loadings"
        :finished="finisheds"
        :finished-text="$t('hj43')"
        @load="onLoads"
        :immediate-check="immediate"
        v-show="chicangidx === 1"
      >
        <div
          class="cichang"
          @click="goDetail(item, index)"
          v-for="(item, index) in tabsPcArr"
          :key="item.id"
        >
          <div class="dingbu">
            <div class="dl">
              <h6>{{ item.stockName ? item.stockName : item.indexName }}</h6>
              <p>
                <span v-show="item.stockGid.indexOf('sz') >= 0">深</span>
                <span class="sh" v-show="item.stockGid.indexOf('sh') >= 0"
                  >沪</span
                >
                <span class="bj" v-show="item.stockGid.indexOf('bj') >= 0"
                  >北</span
                >
                <a class="">{{ item.stockGid }}</a>
              </p>
            </div>
            <div class="dr" v-if="chicangidx == 0">平仓</div>
          </div>
          <div class="fudo" v-if="chicangidx == 0">
            <h6>
              最新 <span class="red">{{ item.now_price }}</span>
            </h6>
            <p>{{ item.buyOrderTime | gettime }}</p>
          </div>
          <div class="fudo" v-else>
            <h6>卖出时间</h6>
            <p>{{ item.sellOrderTime | gettime }}</p>
          </div>
          <div class="fudong redbg">
            <div class="kuij">
              <p>
                <span>浮动盈亏：</span
                ><a class="red">{{ item.profitAndLose }}</a>
              </p>
              <p>
                <span>总盈亏：</span
                ><a class="red">{{ item.allProfitAndLose }}</a>
              </p>
            </div>
          </div>
          <div class="plkm">
            <p>
              <span>买入价格</span
              ><a class="red">{{ item.buyOrderPrice }}/股</a>
            </p>
            <p>
              <span>数量</span><a class="red">{{ item.orderNum }}股</a>
            </p>
            <p>
              <span>买入手续费</span><a class="red">{{ item.orderFee }}</a>
            </p>
            <p>
              <span>股值</span><a class="red">{{ item.orderTotalPrice }}</a>
            </p>
            <p>
              <span>杠杆倍数</span><a class="red">{{ item.orderLever }}</a>
            </p>
            <p>
              <span>使用本金</span
              ><a class="red">{{ item.orderTotalPrice / item.orderLever }}</a>
            </p>
            <p v-if="chicangidx == 1">
              <span>卖出价格</span
              ><a class="red">{{ item.sellOrderPrice }}/股</a>
            </p>
            <p v-if="chicangidx == 1">
              <span>留仓费</span><a class="red">{{ item.orderStayFee }}</a>
            </p>
          </div>
        </div>
      </van-list>
    </div>
    <div style="height:2rem"></div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { MessageBox } from "mint-ui";
import * as api from "@/axios/api";
export default {
  components: {},
  props: {},
  data() {
    return {
      headertab: 0,
      chicangList: [
        {
          name: "我的持仓"
        },
        {
          name: "我的平仓"
        }
      ],
      chicangidx: 0,
      loading: false,
      loadings: false,
      finished: false,
      finisheds: false,
      page: 1,
      pages: 1,
      immediate: false,
      tabsPositionNumArr: [],
      tabsPcArr: []
    };
  },
  created() {},
  mounted() {
    this.getUserInfo();
    this.getListDetail();
    this.getListDetails();
    this.$nextTick(() => {
      setTimeout(() => {
        this.bindSocket();
      }, 500);
    });
  },
  beforeDestroy() {
    this.$socket.connected(socket => {
      socket.send({
        type: "login_out",
        params: { token: localStorage.getItem("USERTOKEN") }
      });
    });
  },
  methods: {
    // 链接socket
    bindSocket() {
      var that = this;
      that.$socket.connected(socket => {
        socket.send({
          type: "login",
          params: { token: localStorage.getItem("USERTOKEN") }
        });
        socket.on("login", msg => {
          if (msg.positionOrder.length > 0) {
            // this.tabsPositionNumArr = msg.positionOrder
            for (var i = 0; i < this.tabsPositionNumArr.length; i++) {
              for (var j = 0; j < msg.positionOrder.length; j++) {
                if (
                  this.tabsPositionNumArr[i].stockGid ==
                  msg.positionOrder[j].stockGid
                ) {
                  this.tabsPositionNumArr[i].now_price =
                    msg.positionOrder[j].now_price;
                  this.tabsPositionNumArr[i].profitAndLose =
                    msg.positionOrder[j].profitAndLose;
                  this.tabsPositionNumArr[i].allProfitAndLose =
                    msg.positionOrder[j].allProfitAndLose;
                }
              }
            }
          }
        });
      });
    },
    //进入详情
    goDetail(item) {
      console.log(item);
      var codes = "";
      var names = "";
      var stock_type = "";
      var soks = "";
      var if_zhishu = "0";
      var if_us = "";
      codes = item.stockCode;
      names = item.stockName;
      stock_type = this.filterSH(item.stockGid);
      soks = this.filterSH(item.stockGid);
      if_zhishu = "0";
      if_us = "";

      this.$router.push({
        path: "/kline",
        query: {
          name: names,
          stockplate: item.stock_plate,
          code: codes,
          type: stock_type,
          sok: soks,
          if_us: if_us,
          usType: item.type,
          if_zhishu: if_zhishu
        }
      });
    },

    filterSH(val) {
      if (val.indexOf("sh") >= 0) {
        return 1;
      } else if (val.indexOf("bj") >= 0 || val.indexOf("sz") >= 0) {
        return 0;
      }
    },
    onLoad() {
      //持仓
      this.page++;
      switch (this.chicangidx) {
        case 0:
          //沪深京持仓
          this.getListDetail();
          break;
        case 1:
          //指数持仓
          //   this.getzhishuListDetail();
          break;

        default:
          break;
      }
    },
    getsearch() {
      this.$router.push({
        path: "/Searchlist"
      });
    },
    onLoads() {
      //平仓
      this.pages++;
      //沪深京平仓
      this.getListDetails();
    },
    getpingcang(val) {
      // if (!this.$store.state.userInfo.idCard) {
      //     Toast(this.$t('hj138'))
      //     this.$router.push('/authentications')
      //     return
      // }
      if (this.chicangidx == 0) {
        //沪深京
        MessageBox.confirm(this.$t("hj139") + "?", this.$t("hj165"), {
          confirmButtonText: this.$t("hj161"),
          cancelButtonText: this.$t("hj106")
        })
          .then(async () => {
            let opt = {
              positionSn: val
            };
            let data = await api.sell(opt);
            if (data.status === 0) {
              Toast(data.msg);
              //沪深京持仓
              this.finished = false;
              this.getListDetail();
              this.tabsPositionNumArr = [];
              //沪深京平仓
              this.finisheds = false;
              this.tabsPcArr = [];
              this.getListDetails();
            } else if (data.msg.indexOf("不在交易时段内") > -1) {
              Toast(this.$t("hj140"));
            } else {
              Toast(data.msg);
            }
          })
          .catch(() => {});
      }
    },
    async getListDetails() {
      //获取沪深我的平仓列表
      let opt = {
        state: 1,
        stockCode: "", // 代码
        stockSpell: "", // 简拼
        pageNum: this.pages,
        pageSize: 15
      };
      api
        .getOrderList(opt)
        .then(res => {
          let { status, data, msg } = res;
          let { list, total } = data;
          if (status === 0) {
            list.forEach(element => {
              this.tabsPcArr.push(element);
            });
            if (this.tabsPcArr.length >= total) {
              this.finisheds = true;
            }
          } else {
            Toast(msg);
          }
        })
        .finally(() => {
          this.loadings = false;
          this.finisheds = true;
        });
    },
    async getListDetail() {
      //获取沪深我的持仓列表
      let opt = {
        state: 0,
        stockCode: "", // 代码
        stockSpell: "", // 简拼
        pageNum: this.page,
        pageSize: 15
      };
      api.getOrderList(opt).then(res => {
        let { status, data, msg } = res;
        let { list, total } = data;
        if (status === 0) {
          list.forEach(element => {
            this.tabsPositionNumArr.push(element);
          });
          if (this.tabsPositionNumArr.length >= total) {
            this.finished = true;
          }
        } else {
          Toast(msg);
        }
      });
    },
    async getSettingInfo() {
      let data = await api.getSetting();
      if (data.status === 0) {
        // 成功
        this.settingInfo = data.data;
      } else {
        Toast(data.msg);
      }
    },
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo();
      if (data.status === 0) {
        this.$store.state.userInfo = data.data;
      } else {
        Toast(data.msg);
      }
      this.$store.state.user = this.user;
    }
  },
  filters: {
    gettime(time) {
      if (!time) {
        return "";
      }
      var nd = new Date(time);
      var y = nd.getFullYear();
      var mm = nd.getMonth() + 1;
      var d = nd.getDate();
      var h = nd.getHours();
      var m = nd.getMinutes();
      var c = nd.getSeconds();
      if (mm < 10) {
        mm = "0" + mm;
      }
      if (d < 10) {
        d = "0" + d;
      }
      if (h < 10) {
        h = "0" + h;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (c < 10) {
        c = "0" + c;
      }
      //17:35:2922-06-2022
      return y + "-" + mm + "-" + d + " " + h + ":" + m + ":" + c;
    }
  }
};
</script>

<style lang="less" scoped>
.red {
  color: #d73d3d !important;
}

.green {
  color: #20b844 !important;
}

.redbg {
  background: rgba(115, 131, 251, 0.3) !important;
}

.greenbg {
  background: #dcf7ee !important;
}

.chicangcontainer {
}

.toubu {
  width: 100%;
  height: 1.6rem;
  background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(241, 22, 20));
  display: flex;
  justify-content: space-between;

  .tr {
    width: 0.43rem;
    height: 0.43rem;
    background: url()
      no-repeat 50%;
    background-size: 100%;
    margin-right: 0.4rem;
    margin-top: 0.32rem;
  }
}

.dabokl {
  width: 100%;
  min-height: 1.07rem;
  border-radius: 0.4rem 0.4rem 0 0;
  margin-top: -0.4rem;
  background: #fff;

  .sert {
    width: 5.34rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    height: 1.07rem;

    span {
      text-align: center;
      color: #666;
      font-size: 0.4rem;
      font-weight: 550;
      line-height: 1.07rem;
    }

    .sdpl {
      color: #5d7dfb;
    }

    a {
      width: 0.53rem;
      height: 0.11rem;
      background: #5d7dfb;
      border-radius: 0.05rem;
      position: absolute;
      bottom: 0;
      margin-left: -0.266rem;
      transition: all 0.5s;
    }
  }

  .bnm {
    height: 0.03rem;
    width: 100%;
    background: #e0e0e0;
  }
}

.chicanglistmain {
  .cichang {
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.4rem 0;

    .dingbu {
      width: 9.35rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      .dl {
        h6 {
          color: #333;
          font-size: 0.4rem;
          font-weight: 500;
        }

        p {
          color: #333;
          font-size: 0.32rem;
          margin-top: 0.13rem;

          span {
            width: 0.4rem;
            height: 0.4rem;
            background: #3b4fde;
            border-radius: 0.05rem;
            text-align: center;
            line-height: 0.4rem;
            color: #fff;
            font-size: 0.3rem;
            display: inline-block;
          }

          a {
            display: inline-block;
            height: 0.4rem;
            line-height: 0.4rem;
            padding: 0 0.11rem;
            background: rgba(59, 79, 222, 0.1);
            border-radius: 0.05rem;
            color: #3b4fde;
            font-size: 0.32rem;
            vertical-align: middle;
          }

          .bj {
            background: #ea6248;
          }

          .sh {
            background: #aa3bde;
          }

          .shbg {
            color: #aa3bde;
            background: rgba(170, 59, 222, 0.1);
          }

          .bjbg {
            color: #ea6248;
            background: rgba(234, 98, 72, 0.1);
          }
        }
      }

      .dr {
        width: 1.6rem;
        height: 0.67rem;
        background: linear-gradient(-55deg, #4d7aff, #6f7fff);
        border-radius: 0.35rem;
        margin-top: 0.13rem;
        text-align: center;
        color: #fff;
        font-size: 0.32rem;
        line-height: 0.67rem;
      }
    }

    .fudo {
      width: 9.35rem;
      margin: 0 auto;
      margin-top: 0.4rem;
      display: flex;
      justify-content: space-between;

      h6 {
        color: #333;
        font-size: 0.37rem;

        span {
          font-weight: 600;
        }
      }

      p {
        color: #666;
        font-size: 0.32rem;
      }
    }

    .fudong {
      width: 100%;
      height: 0.8rem;
      margin: 0 auto;
      margin-top: 0.4rem;

      .kuij {
        width: 9.35rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        p {
          width: 47%;
          line-height: 0.8rem;
          display: flex;
          justify-content: space-between;

          span {
            color: #666;
            font-size: 0.32rem;
          }

          a {
            font-size: 0.32rem;
          }
        }
      }
    }

    .plkm {
      display: flex;
      justify-content: space-between;
      width: 9.35rem;
      margin: 0 auto;
      flex-wrap: wrap;

      p {
        width: 47%;
        margin-top: 0.4rem;
        display: flex;
        justify-content: space-between;

        span {
          color: #666;
          font-size: 0.32rem;
        }

        a {
          font-size: 0.32rem;
        }
      }
    }
  }
}
</style>
